<template>
    <div>
        <cus-modal
            ref="modal"
            title="创建手工食谱 - 选择餐次"
            :width="550"
            :closable="false"
            @on-visible-change="onVisibleChange"
        >
            <div class="noticeBox">
                <CheckboxGroup v-model="selectMeals">
                    <Checkbox :label="item.name" border v-for="(item, index) in mealTimeList" :key="index" style="margin:0 20px 20px 0px;"></Checkbox>
                </CheckboxGroup>
            </div>
            <div slot="footer">
                <slot name="footer">
                    <div class="modal-footer">
                        <cus-button size="small" class="mr_2" @onClick="onCancel">取消</cus-button>
                        <cus-button type="primary" size="small" @onClick="onOk">确认</cus-button>
                    </div>
                </slot>
            </div>
        </cus-modal>
    </div>
</template>

<script>

export default {
    components: {},
    name: "chooseMealtimes",
    data() {
        return {
            mealTimeList: [
                { label: 'breakfast', name: '早餐', type: 0 },
                { label: 'betwwenMealOne', name: '早~午间餐', type: 3 },
                { label: 'lunch', name: '午餐', type: 1},
                { label: 'betwwenMealTwo', name: '午~晚间餐', type: 4},
                { label: 'supper', name: '晚餐', type: 2 },
                { label: 'midnightMealOne', name: '夜餐1', type: 5 },
                { label: 'midnightMealTwo', name: '夜餐2', type: 6 }
            ],
            selectMeals: [], // 选中餐次集合
        };
    },
    mounted() {
       
    },
    methods: {
        onVisibleChange(v) {
            if(!v) {
                this.selectMeals = [];
            }
        },     
        show() {
            this.$refs["modal"].show = true;
        },
        //模态框取消
        onCancel() {
            this.$refs["modal"].show = false;
        },
        onOk() {
            if(!this.selectMeals.length) {
                this.$Message.warning("请先选择创建需要的餐次.")
            } else {
                let arr = [];
                // this.selectMeals.forEach(item => {
                //     arr.push(this.mealTimeList.filter(it => it.name == item)[0]);
                // })
                this.mealTimeList.forEach((item, index) => {
                    if(this.selectMeals.indexOf(item.name) > -1) {
                        arr.push(item)
                    }
                })
                this.$emit("chooseMealsOk", arr);
                this.onCancel();
            }
        }
    },
};
</script>

<style scoped lang="less">
/deep/.ivu-checkbox-border {
    line-height: 0!important;
}
</style>
